<template>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :append-to-body="true"
        :close-on-click-modal="false">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px"
            style="width: 80%; margin-left:50px;">
            <el-row :gutter="40">
                <el-col :span="24">
                    <el-form-item label="列名" prop="columnName">
                        <el-select v-model="temp.columnName" class="filter-item" placeholder="请选择列名" @change="changeColumn">
                            <el-option v-for="(item, index) in columnData" :key="index" :label="item.columnName"
                                :value="item" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="标签名" prop="labelname">
                        <el-select v-model="temp.labelName" class="filter-item" placeholder="请选择标签名" :disabled="true">
                            <el-option v-for="(item, index) in labelData" :key="index" :label="item.labelName"
                                :value="item.labelName" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="标签值" prop="labelValue">
                        <el-select v-model="temp.labelValue" class="filter-item" placeholder="请选择标签值" :disabled="!temp.columnName">
                            <el-option v-for="(item, index) in counteData" :key="index" :label="item.label"
                                :value="item.label" />
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">
                {{ $t('table.cancel') }}
            </el-button>
            <el-button type="primary" :loading="loading" @click="dialogStatus === 'create' ? createData() : updateData()">
                {{ $t('table.confirm') }}
            </el-button>
        </div>
        <!-- <div class="el-message el-message--error"><p>请填写完整</p></div> -->
    </el-dialog>
</template>
  
<script>
import { getColumns, getLabelcount } from '@/api/metadata/entity'

export default {
    name: 'entityForm',
    data() {
        return {
            entityeData: [],
            rules: {
            },
            temp: {},
            textMap: {
                update: '编辑',
                create: '新建'
            },
            loading: false,
            dialogFormVisible: false,
            dialogStatus: '',
            tableId: '',
            columnData: [],//列数据
            labelData: [],//标签名
            counteData: []//标签值
        }
    },
    methods: {
        setList(data) {
            getColumns(data).then(res => {
                console.log(res, '列')
                if (res.data.code == 200) {
                    this.columnData = res.data.data
                }
            })
        },
        //选择列
        changeColumn(item) {
            this.temp = {
                columnId: item.id,
                columnName: item.columnName,
                labelName: item.label,
                labelId: item.labelId
            }
            //获取下拉标签值
            getLabelcount(item.labelId).then(res => {
                // console.log(res,'标签值')
                if (res.data.code == 200) {
                    this.counteData = res.data.data
                }
            })
        },
        createData(){
            this.dialogFormVisible=false
            this.$emit('addList',this.temp)
        },
        resetTemp() {
            this.loading = false
            this.temp = {
                id: undefined,
                tableId: undefined,//表id
                columnId: undefined,//列Id
                columnName: undefined,//列名称
                labelId: undefined,//标签Id
                labelName: undefined,//标签名称
                labelValue: undefined,//标签值
                name: undefined//实体名称
            }
        },
        handleCreate(id) {
            this.resetTemp()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.setList({ tableId: id })
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        handleUpdate(id) {
            this.resetTemp()
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
            getcolumn(id).then(response => {
                if (response.data.code === 0) {
                    this.temp = response.data.data
                } else {
                    this.dialogFormVisible = false
                    this.$message.error(response.data.msg)
                }
            })
        },
        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    if (this.temp.labelId !== undefined && this.temp.labelId !== '' && this.temp.labelId instanceof Array) {
                        this.temp.labelId = this.temp.labelId[this.temp.labelId.length - 1]
                    }

                    this.loading = true
                    updatecolumn(this.temp).then(response => {
                        this.loading = false
                        if (response.data.code === 0) {
                            this.dialogFormVisible = false
                            this.getList()
                            this.$message.success(response.data.msg)
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    })
                }
            })
        }
    }
}
</script>
<style>
.el-dialog {
    width: 70%;
}</style>

  